<template>
  <Page>
    <div slot="title">
      <div class="base-page-title" name="title">
        <top-hrader @back="$emit('back')" :back="back" :className="className" :theme="theme">
          <template slot="name">
            <img class="title-img" src="~assets/img/download_logo.png" alt="">
            <span>乐马国际会</span>
          </template>
          <template slot="right"><slot name="right"></slot></template>
        </top-hrader>
      </div>
    </div>
    <div class="inviter-wrap">
      <div class="inviter-title">
        <div class="txt">您还不是会员，仅需一步，便可成为乐马国际会的</div>
        <div class="txt">尊贵会员，享受我们提供的高端商旅服务。</div>
      </div>
      <img class="inviter-img" src="~assets/img/inviter-bg.png">
      <div class="inviter-con">
        <form class="form-conent"  @keypress.enter="submit" onsubmit="return false">
          <div>
            <div class="form-item">
              <div class="form-label">全名</div>
              <div class="form-input fx fx-vc">
                <Input type="text" class="flex" v-model="form.name" placeholder="全名或昵称至少填写一个"/>
              </div>
            </div>
            <div class="form-item">
              <div class="form-label">昵称</div>
              <div class="form-input fx fx-vc">
                <Input type="text" class="flex" v-model="form.nickname" placeholder="全名或昵称至少填写一个"/>
              </div>
            </div>
            <div class="form-item">
              <div class="form-label"><code>*</code>登录密码</div>
              <div class="form-input fx fx-vc">
                <Password class="flex" placeholder="6-30位含大小写字母数字组合" v-model="form.password" />
              </div>
            </div>
            <div class="form-item">
              <div class="form-label"><code>*</code>再次输入密码</div>
              <div class="form-input fx fx-vc">
                <Password class="flex" placeholder="请再次输入密码" v-model="form.repassword" />
              </div>
            </div>
            <p class="agreement">
              <input type="checkbox" v-model="form.agree"/> 注册即代表您已接受
              <nuxt-link to="/agreement" class="link">《服务协议及隐私权政策》</nuxt-link>
            </p>
          </div>
          <a class="btn btn-block btn-primary submit" :disabled="!valid_form" @click="submit($event)">{{posting ? '提交中' : '完成'}}</a>
        </form>
      </div>
    </div>
  </Page>
  </template>

  <script>
  import topHrader from '~/components/common/header.vue'
  import Page from '~/components/page';
  import Input from '~/components/Input'
  import Password from '~/components/Password';

  export default {
    components: {
      topHrader,
      Page,
      Input,
      Password
    },
    async asyncData({ route }){
      return route.params;
    },
    data(){
      return {
        name:'邀请人',
        form: {
          phone_area_code:'',
          phone:'',
          ver_code:"",
          code: '',
          by: '1',
          token:'',
          password:'',
          repassword: '',
          nickname: '',
          name: '',
        },
        posting:false,
      }
    },
    props: {
      back:{ // 如果为true ,则处触发back事件，具体处理逻辑再调用页面处理
        type:Boolean,
        default:false,
      },
      className: {
        default:1
      },
      theme: {
        default:''
      },
    },
    computed: {
      valid_form(){
        let flag = (!!String(this.form.name).trim() || !!String(this.form.nickname).trim())
                  && !!String(this.form.password).trim()
                  && !!String(this.form.repassword).trim()
                  && this.form.agree
        return flag && !this.posting;
      }
    },
    beforeMount () {
      if(!this.$route.params.form) {
        let code = this.$store.getters.getCode;
        if(code) {
          this.$router.replace({name: 'invite', query: {code: code}});
        } else {
          this.$router.back()
        }
      }
    },
    methods: {
      async submit () {
        if(this.posting || !this.valid_form || !this.checkPassword(this.form.password) || !this.recheckPassword()) return false;
        this.post = true;
        let { data } = await this.$axios.post('?ct=member&ac=register', this.form);

        let param = {
          token: data.data.token,
          uid: data.data.uid,
          pid: data.data.tcp_uid,
          code: data.data.user_code,
          invite_name: data.data.invite_name,
          invite_manager: data.data.invite_manager,
          isregister: true,
          nickname: data.data.nickname,
        }
        // 已存在组织 + 申请成功
        this.post = false;
        if(data.code == 0) {
          localStorage.setItem('invite', JSON.stringify(param))
          this.$router.replace({name: 'invite-login', params: {form: param}});
        // 提交信息错误
        }else {
          this.$toast(data.msg);
        }
      },
      recheckPassword(){
        if(this.form.password !== this.form.repassword){
          this.$toast('两次密码不一致');
          return false;
        }
        return true;
      },
      checkPassword(value){
        var lv = 0;var val = value;
        if (val.match(/[A-Z]/g)) {
          lv++;
        }
        if (val.match(/[a-z]/g)) {
          lv++;
        }
        if (val.match(/[0-9]/g)) {
          lv++;
        }

        if (lv < 3 || value.length < 6 || value.length >30) {
          this.$toast('密码格式不正确');
          return false;
        } else {
          return true;
        }
      },
    },
  }
  </script>

  <style lang="less" scoped>
  .header {
    span{
      vertical-align: middle;
    }

    .title-img {
      margin-right: 19px;
      display: inline-block;
      width: 48px;
      height: 48px;
      vertical-align: middle;
    }
  }


  .inviter-wrap {
    padding-bottom: 40px;
    background: #fff;

    .inviter-title {
      padding: 60px 0;
      line-height: 1;
      font-size: 30px;
      text-align: center;

      .txt + .txt {
        margin-top: 24px;
      }
    }

    .inviter-img {
      display: block;
      margin: 0 auto;
      width: 700px;
    }

    .form-conent {
      margin: 74px 30px 0;

      .form-item {

        & + .form-item {
          margin-top:57px;
        }

        .form-label {
          margin-bottom: 18px;
          font-size:30px;
          color:#292929;
          white-space: nowrap;
          line-height: 1;

          code {
            color: #ff0000;
            font-size: 32px;
          }
        }

        .form-input {
          color: #333;
          height:88px;
          border-radius: 5px;
          border: 1px solid #ccc;
          padding: 0 20px;

          input,select {
            padding-left: 20px;
            display: block;
            -webkit-appearance: none;
            border:none;
            outline: none;
            height:40px;
            font-size:30px;
          }
        }
      }

      .agreement {
        margin-top: 30px;

        input[type='checkbox'] {
          margin-right: 5px;
          width: 28px;
          height: 28px;
          -webkit-appearance: checkbox;
          vertical-align: middle
        }

        .link {
          color: #2086f9;
        }
      }
    }

    .submit {
      margin-top: 92px;
    }
  }
  </style>
